<template>
  <el-form
    :model="cardForm"
    :rules="cardRules"
    :disabled="disabled"
    ref="cardForm"
    label-width="120px"
  >
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="对公开户证明:" prop="robCardPublicImg">
          <el-upload
            action=""
            list-type="picture-card"
            :http-request="httpCardPublicRequest"
            :limit="1"
            :on-remove="robCardRemove"
            :before-remove="beforerobCardRemove"
            :file-list="robCardFileList"
            :before-upload="beforeUpload"
            :on-preview="imgPreview"
          >
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-col>
      <!-- <el-col :span="12">
        <el-form-item label="结算卡正面:" prop="robBankPositive">
          <el-upload
            action=""
            list-type="picture-card"
            :http-request="httpBankPositiveRequest"
            :limit="1"
            :on-remove="robBankRemove"
            :before-remove="beforerobBankRemove"
            :file-list="robBankFileList"
            :before-upload="beforeUpload"
          >
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="结算卡反面:" prop="robBankBack">
          <el-upload
            action=""
            list-type="picture-card"
            :http-request="httpBankBackRequest"
            :limit="1"
            :on-remove="robBackRemove"
            :before-remove="beforecheckoutCounterRemove"
            :file-list="robBackFileList"
            :before-upload="beforeUpload"
          >
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-col> -->
      <el-col :span="12">
        <el-form-item label="开户行:" prop="robBank">
          <el-input
            size="small"
            v-model="cardForm.robBank"
            placeholder="请输入开户行"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="开户支行:" prop="robBankBranch">
          <el-input
            size="small"
            v-model="cardForm.robBankBranch"
            placeholder="请输入开户支行"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="开户名称:" prop="robBankName">
          <el-input
            size="small"
            v-model="cardForm.robBankName"
            placeholder="请输入开户名称"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="银行账号:" prop="robBankNo">
          <el-input
            size="small"
            v-model="cardForm.robBankNo"
            placeholder="请输入银行账号"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-image-viewer
        style="z-index: 99999;"
        v-if="imgShow"
        :on-close="()=>{ imgShow = false }"
        :url-list="imgUrlList"
      ></el-image-viewer>
  </el-form>
</template>

<script>
import { uploadPrivate, uploadOCRCard } from "@/api/system/oss";
import canvasImg from '@/util/canvasImg';

export default {
  mixins: [canvasImg],
  props: {
    cardForm: Object,
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imgShow:false,
      imgUrlList:[],
      cardRules: {
        robBank: [{ required: true, message: "请输入开户行", trigger: "blur" }],
        robBankBranch: [
          { required: true, message: "请输入开户支行", trigger: "blur" },
        ],
        robBankName: [
          { required: true, message: "请输入开户名称", trigger: "blur" },
        ],
        robBankNo: [
          { required: true, message: "请输入银行账号", trigger: "blur" },
        ],
        // robBankPositive: [
        //   { required: true, message: "请上传结算卡正面", trigger: "blur" },
        // ],
        // robBankBack: [
        //   { required: true, message: "请上传结算卡反面", trigger: "blur" },
        // ],
        robCardPublicImg: [
          { required: true, message: "请上传对公开户证明", trigger: "blur" },
        ],
      },
      robBankFileList: [],
      robBackFileList: [],
      robCardFileList: [],
    };
  },
  methods: {
    /* 预览图片 */
    imgPreview(file) {
        this.imgUrlList[0] = file.url;
        this.imgShow = true;
    },
    // beforeUpload(file) {
    //   this.compressPictures(file);
    // },
    /* 开户行正面上传 */
    httpBankPositiveRequest(option) {
      uploadPrivate(option.file).then((res) => {
        this.cardForm.robBankPositive = res.data.data.attachId;
        this.$refs.cardForm.validateField("robBankPositive");
      });
    },
    /* 开户行反面上传 */
    httpBankBackRequest(option) {
      uploadPrivate(option.file).then((res) => {
        this.cardForm.robBankBack = res.data.data.attachId;
        this.$refs.cardForm.validateField("robBankBack");
      });
    },
    /* 开户许可证上传 */
    httpCardPublicRequest(option) {
      uploadOCRCard(option.file, "4").then((res) => {
        this.cardForm.robCardPublicImg = res.data.data.link;
        this.cardForm.robBankName = res.data.data.customerName;
        this.cardForm.robBankBranch = res.data.data.depositaryBank;
        this.cardForm.robBankNo = res.data.data.bankAccount;
        this.$refs.cardForm.validateField("robCardPublicImg");
      });
    },
    /* 开户行正面删除 */
    robBankRemove(file, fileList) {
      this.robBankFileList = fileList;
      this.cardForm.robBankPositive = "";
    },
    beforerobBankRemove() {
      return this.$confirm(`确定移除开户行正面照片？`);
    },
    /* 开户行反面删除 */
    robBackRemove(file, fileList) {
      this.robBackFileList = fileList;
      this.cardForm.robBankBack = "";
    },
    beforerobBackRemove() {
      return this.$confirm(`确定移除开户行反面照片？`);
    },
    /* 开户许可证删除 */
    robCardRemove(file, fileList) {
      this.robCardFileList = fileList;
      this.cardForm.robCardPublicImg = "";
    },
    beforerobCardRemove() {
      return this.$confirm(`确定移除开户许可证照片？`);
    },
  },
};
</script>

<style>
</style>
